<!doctype html>
<html lang="en" ng-app="application">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title ng-bind="$state.current.data.vars.title"></title>
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="assets/img/touch-icon-iphone-62abe0cdf7cdb268f32461f9e48a23c4.png"/>
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/touch-icon-ipad-7b1c7683ce9b947aef5438684d8866fd.png"/>
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/touch-icon-iphone-retina-82c632d82262f8d8a739f24a7c26da07.png"/>
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/touch-icon-ipad-retina-7482693019c5e4d3e8d1feffe719e6c7.png"/>
    <link rel="shortcut icon" href="assets/img/favicon-a1157e85ba46f377078d433981148c94.ico">
    <link href="assets/css/app.css" rel="stylesheet" type="text/css">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/languages/scss.min.js"></script>
    <script src="assets/js/routes.js"></script>
    <script src="assets/js/app.js"></script>
    <script src="assets/js/templates.js"></script>
  </head>
  <body zf-esc-close zf-close-all>

    <!-- Google Analytics -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-2195009-60', 'auto');
    </script>
    <!-- /Google Analytics -->

    <!-- Right Off Canvas -->
    <zf-offcanvas id="example-canvas-top" position="top">
      <div class="grid-content">
        <a href="#" zf-close class="close-button">&times;</a>
        <h3>This is a top off-canvas menu.</h3>
      </div>
    </zf-offcanvas>

    <!-- Bottom Off Canvas -->
    <zf-offcanvas id="example-canvas-right" position="right">
      <div class="grid-content">
        <a href="#" zf-close class="close-button">&times;</a>
        <h3>This is a right off-canvas menu.</h3>
      </div>
    </zf-offcanvas>

    <!-- Left Off Canvas -->
    <zf-offcanvas id="example-canvas-bottom" position="bottom">
      <div class="grid-content">
        <a href="#" zf-close class="close-button">&times;</a>
        <h3>This is a bottom off-canvas menu.</h3>
      </div>
    </zf-offcanvas>

    <!-- Top Off Canvas -->
    <zf-offcanvas id="example-canvas-left" position="left" class="detached">
      <div class="grid-content">
        <a href="#" zf-close class="close-button">&times;</a>
        <h3>This is a left off-canvas menu.</h3>
      </div>
    </zf-offcanvas>

    <!-- App frame -->
    <div class="vertical grid-frame">

      <!-- Title bar -->
      <div id="header" class="shrink collapse grid-content">
        <div ng-include="'partials/global-nav.html'"></div>
      </div>
      <!-- /Title bar -->

      <div class="grid-block" ng-controller="NavController">

        <!-- Sidebar nav -->
        <div zf-panel id="sidebar" class="docs-sidebar">
          <!-- Search bar -->
          <div class="grid-content shrink docs-search">
            <autocomplete data="routing" on-select="selectRoute" attr-placeholder="Search docs: e.g. forms" ng-model="typedText" />
          </div>
          <!-- /Search bar -->
          <!-- Page list -->
          <div class="grid-content collapse">
            <div ng-include="'partials/component-list.html'"></div>
          </div>
          <!-- /Page list -->
        </div>
        <!-- /Sidebar nav -->

        <div ng-include="'partials/examples-panel.html'"></div>

        <!-- Main content -->
        <div class="docs-main" ng-show="$state.current.name.length">
          <div class="grid-container">
            <h2>Foundation for Apps</h2>
            <h3 class="subheader">We built Foundation for Apps to allow everyone from JavaScript newbies to experienced Angular Developers to build awesome, responsive web apps.</h3>
            <div class="callout">
              <p class="callout-title">Deprecation Notice</p>
              <p>We believe the best solution for the future of the web is a single, robust framework capable of developing webapps and websites, so we’ve made the decision to streamline our development and move Foundation for Apps into our <a href="http://zurb.com/playground/foundation-for-apps" target="_blank">experimental playground</a> to concentrate on Foundation for Sites. Foundation has, and will continue to push the web forward, and we’re incredibly excited about the future. You can follow along with the <a href="https://github.com/zurb/foundation-sites/wiki/Project-Roadmap" target="_blank">Foundation for Sites roadmap</a> to get more details on where the project is headed and learn how to get involved.</p>
            </div>
            <hr>
            <a class="small secondary expand button hide-for-medium" zf-toggle="sidebar">Show Components</a>
            <div ng-class="['ui-animation']" ui-view autoscroll></div>
          </div>
          
          <!-- Footer -->
          <div ng-include="'partials/zurb-footer.html'"></div>
          <!-- /Footer -->
        </div>
        <!-- /Main content -->

      </div>

    </div>
    <!-- /App frame -->

    <div ng-include="'partials/examples-modal.html'" style="z-index: 10000"></div>

  </body>
</html>
